<template>
    <v-chart :option="option"></v-chart>
</template>

<script setup>
import {ref,onMounted} from 'vue'
//引入echarts的baidu地图扩展
import 'echarts/extension/bmap/bmap.js'
import { getMapData } from '@/api'


const option = ref({})

const renderChart = (scatterData,effectScatterData,styleJson) => {
    option.value = {
        //使用baidu地图做为底图
        bmap:{
            key: 'WRPDpUT50zDtgwlnux6dpaL0eSwerIOb', // 申请的baidu地图ak
            center:[108.954355,34.346721],//地图中心坐标
            zoom:5,//地图的缩放级别(默认值5)
            roam:true,//是否开启鼠标缩放和平移漫游

            //自定义地图样式
            mapStyle:{
                styleJson:styleJson,
            }
        },
        title:{
            text:'新中地网点地图',
            left:'center',
        },
        //全局的提示框组件
        tooltip:{},
        series:[
            //普通的散点图
            {
                type:'scatter',
                name:'新中地外卖',
                //对于地图类型的data格式:[{name:'北京',value:[经度,纬度,销售额]}]
                coordinateSystem:'bmap',//指定使用百度地图作为坐标系
                data:scatterData,
                encode:{
                    value:2,//指定第三个维度值
                },
                //自定义散点的大小,销售额 / 100
                symbolSize(value){
                    return value[2] / 10
                }
            },
            //带动效(涟漪效果)的散点图
            {
                type:'effectScatter',
                name:'新中地外卖TOP10',
                coordinateSystem:'bmap',
                data: effectScatterData,
                encode:{
                    value:2,//指定第三维度值
                },
                //自定义散点的大小,销售额/100
                symbolSize(value){
                    return value[2] /10
                },
                //设置涟漪效果
                rippleEffect:{
                    brushType:'stroke',
                    color:'purple',
                },
                //设置局部的提示框样式
                tooltip:{
                    formatter(params){
                        return `${params.name}<br/>销售额:${params.value[2]}`
                    },
                    textStyle:{
                        color:'green',
                    },
                },
                itemStyle:{
                    color:'#5270D4',
                }
            }
        ]
    }
}

function converData(obj){
    const res = []
    const {city,geodata} = obj
    city.forEach((item) => {
        // console.log(item.name,'000')//城市名
        // console.log(geodata,'333')
        const geo = geodata[item.name]
        if(geo){
            res.push({
                name:item.name,
                value:[...geo,item.value],
            })
        }
    })
    return res
}

onMounted(async() => {
    const res = await getMapData()
    // console.log(res,'111')
    // console.log(converData(res),'2222')
    //从import函数导入一个module(模块),返回Module对象
    const styleJson = await import('./mapStyle.json')
    const scatterData = converData(res)
    //按照销售额从大到小的排序
    const effectScatterData = scatterData.sort((a,b) => b.value[2] - a.value[2]).slice(0,10)
    renderChart(scatterData,effectScatterData,styleJson.default)
})
</script>

<style scoped>
</style>